<template>  
  <div>  
    <!-- 全选checkbox -->  
    <el-checkbox v-model="isAllChecked" @change="handleAllCheckChange">全选</el-checkbox>  
    <div v-for="item in cartItems" :key="item.id" :style="{ backgroundColor: item.checked ? '#f0f9eb' : 'white' }" class="cart-item">  
      <!-- 商品checkbox -->  
      <el-checkbox v-model="item.checked" @change="() => {}"></el-checkbox>  
      {{ item.name }}  
    </div>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const cartItems = ref([  
      { id: 1, name: '商品1', checked: false },  
      { id: 2, name: '商品2', checked: false },  
      { id: 3, name: '商品3', checked: false }  
    ]);  
  
    const isAllChecked = ref(false);  
  
    // 监听cartItems中每个item.checked的变化来更新isAllChecked  
    const watchCartItems = () => {  
      // 注意：这里不直接在setup中使用watch，因为示例简化了。实际中应在onMounted或watchEffect中设置  
      // 这里只是为了说明逻辑，我们直接计算isAllChecked的值  
      isAllChecked.value = cartItems.value.every(item => item.checked);  
    };  
  
    // 处理全选变化  
    const handleAllCheckChange = (value) => {  
      cartItems.value.forEach(item => {  
        item.checked = value;  
      });  
      // 由于我们直接修改了cartItems中的每个item.checked，所以不需要额外调用watchCartItems  
    };  
  
    // 注意：在实际应用中，你可能需要使用watch或watchEffect来监听cartItems的变化  
    // 但在这个简单的示例中，我们直接通过handleAllCheckChange来更新所有item的checked状态  
  
    // 返回一个对象，Vue组件可以使用这个对象中的属性和方法  
    return {  
      cartItems,  
      isAllChecked,  
      handleAllCheckChange  
    };  
  }  
};  
</script>  
  
<style>  
.cart-item {  
  padding: 10px;  
  margin: 5px;  
  border: 1px solid #ccc;  
}  
</style>